require('./Jdry.styl');

import {Avatar, Grid, Group} from 'saltui';
import Icon from 'salt-icon'

const avatarColors = ['#78C06E', '#3BC2B5', '#78919D', '#5EC9F6', '#F6BF26'];
const {corpId} = require(`./../../config/${ENV}.json`);

class Jdry extends React.Component {

  constructor(props) {
    super(props);
  }

  onJdryDel(jdryIndex) {
    if (!this.props.readOnly) {
      this.props.onJdryDel(jdryIndex);
    }
  }

  onAddJdryClick() {
    let t = this;

    if (!t.props.readOnly) {
      dd.biz.contact.choose({
        startWithDepartmentId: -1, //-1表示打开的通讯录从自己所在部门开始展示, 0表示从企业最上层开始，(其他数字表示从该部门开始:暂时不支持)
        multiple: true, //是否多选： true多选 false单选； 默认true
        users: [], //默认选中的用户列表，userid；成功回调中应包含该信息
        disabledUsers: [],// 不能选中的用户列表，员工userid
        corpId: corpId, //企业id
        max: 10, //人数限制，当multiple为true才生效，可选范围1-1500
        limitTips: "超出人数", //超过人数限制的提示语可以用这个字段自定义
        isNeedSearch: true, // 是否需要搜索功能
        title: "请选择监督人员", // 如果你需要修改选人页面的title，可以在这里赋值
        local: "false", // 是否显示本地联系人，默认false
        onSuccess: function (data) {
          data.forEach((item, index) => {
            let yes = true;
            //遍历循环是否存在人员,如果有则不添加
            for (var i = 0; i < t.props.jdrys.length; i++) {
              if (item.name == t.props.jdrys[i].name) {
                yes = false;
                break;
              }
            }
            if (yes) {
              t.props.onJdryAdd(item)
            }
          });

        },
        onFail: function (err) {
          console.log(err);
          alert("调用钉钉企业人员选择接口错误:" + JSON.stringify(err));

        }
      });
    }
  }

  render() {

    //监督人员
    let jdrys = [];

    this.props.jdrys && this.props.jdrys.forEach((item, index) => {
      jdrys.push(
        <div key={index} data-dd={item} onClick={() => {
          this.onJdryDel(index)
        }}>
          <Avatar name={item.name} colors={avatarColors}
                  src={item.avatar}/>
          <div style={{textAlign: 'center', paddingTop: '8px'}}>{item.name}</div>
        </div>
      )
    });


    return (
      <div className="jdry">
        <Group.List>
          <Group.Head>监督人员<span
            style={{
              color: '#BDBDBD',
              paddingLeft: '10px',
              fontSize: '12px'
            }}>{!this.props.readOnly && '(点击头像删除)'}</span></Group.Head>
          <Grid col={5} className="background-color-white" square={true} noLine={true}>
            {jdrys}
{/*            {!this.props.readOnly &&
            <div onClick={this.onAddJdryClick.bind(this)} style={{color: '#BDBDBD', textAlign: 'center'}}>
              <Icon name="plus-circle" fill="#BDBDBD" height={40} width={40}/>
              <div style={{marginTop: '5px'}}>添加人员</div>
            </div>
            }*/}
          </Grid>
        </Group.List>
      </div>
    );
  }
}

Jdry.contextTypes = {
  jdrys: React.PropTypes.array,
  readOnly: React.PropTypes.bool,
  onJdryAdd: React.PropTypes.func,
  onJdryDel: React.PropTypes.func,
};

module.exports = Jdry;
